@import '../../style/themes';
@import '../../style/mixins';

$tabs: x-tabs;
$tab-pane: x-tab-pane;

.#{$tabs} {

  &_nav {
    @include reset-component();
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow: overlay;
    @include reset-scroll(4px, 4px, transparent, transparent);

    &:hover {
      @include reset-scroll(4px, 4px, rgba($scrollbar-thumb-bg, .05), transparent);
    }
  }

  &-bar > &_nav {
    .#{$tabs}_tab {
      min-width: 2em;
      padding: 6px 0;
      margin: $margin-xss 0;
      text-align: center;
    }
    .#{$tabs}_tab + .#{$tabs}_tab {
      margin-left: $margin-lg;
    }
    .#{$tabs}_tab-active {
      color: $primary-color;
    }
    .#{$tabs}_bar {
      bottom: 0;
      height: 2px;
    }
  }
  &-line {
    @extend .#{$tabs}-bar;
  }
  &-line > &_nav {
    &::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: $border-color-split;
    }
  }
  &-segment > &_nav {
    padding: 0 3px;
    background: $tabs-segment-bg;
    .#{$tabs}_tab {
      display: flex;
      justify-content: center;
      flex-grow: 1;
      padding: $padding-xs $padding-md;
      z-index: 1;
    }
    .#{$tabs}_bar {
      top: 3px;
      bottom: 3px;
      background: $tabs-segment-bar-bg;
      transition: left .2s, width .2s;
      box-shadow:  $shadow-1-down;
    }
  }
  &-card > &_nav {
    border: 1px $tabs-border-color solid;
    border-bottom-width: 0;
    background: $tabs-card-bg;
    .#{$tabs}_tab {
      padding: $padding-xs $padding-md;
      &-active {
        color: $primary-color;
        background: $tabs-card-active-bg;
      }
    }
    .#{$tabs}_bar {
      display: none;
    }
  }
  &-border-card {
    @extend .#{$tabs}-card;
    border: 1px $tabs-border-color solid;
    box-shadow: $shadow-1-down;
  }
  &-border-card > &_nav {
    border: none;
  }
  &-border-card > .#{$tab-pane} {
    padding: $padding-xs $padding-sm;
  }
  

  &_tab {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: default;
  }

  &_bar {
    position: absolute;
    background: $primary-color;
    transition: left .4s, width .4s;
  }

  .#{$tab-pane} {
    padding-top: $padding-sm;
  }

}